<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TAROT</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/meanings.css">
    <script src="./js/vue@2.js"></script>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>

<body>
    <div id="app" v-cloak>
        <t-header></t-header>
        <main class="container">
            <div class="card-meaning">
                <h1 class="card-meaning-title">
                    {{detail.cardName}} Tarot Card Meaning
                </h1>
                <div class="card-meaning-content">
                    <div class="card-meaning-content_img">
                        <img :src="detail.url" :alt="detail.cardName">
                    </div>
                    <div class="card-meannig-text">
                        <div>
                            <h2>Keywords</h2>
                            <p>{{detail.keywords}}</p>
                        </div>
                        <div>
                            <h2>Upright</h2>
                            <p>{{detail.upright}}</p>
                        </div>
                        <div>
                            <h2>Reversed</h2>
                            <p>{{detail.reversed}}</p>
                        </div>
                        <div>
                            <h2>Card Meaning</h2>
                            <p>{{detail.meaning}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="card-back" href="./meanings.html">View All Tarot Cards</a>
        </main>
        <t-footer></t-footer>
    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { header, footer } from './components/index.js'
    import { meanings } from './js/cardMeanings.js'
    var vm = new Vue({
        el: '#app',
        components: {
            tHeader: header,
            tFooter: footer
        },
        data() {
            return {
                id: 0,
                detail: {}
            }
        },
        created() {
            this.id = getQueryVariable('id') ? getQueryVariable('id') : 0
            this.detail = meanings[this.id]
            console.log(this.detail)
        },
        methods: {

        }
    })
</script>

</html>